<template>
  <div class="bg">
    <van-list v-model="loading" :finished="finished" :finished-text="!loading?'没有更多了~':''" @load="onLoad" :offset="10" :error.sync="err" error-text="加载失败，点击这里重试">
      <div class="info">
        <div class="icon">
          <van-image :src="userInfo.avatar.indexOf('http')!=-1?`${userInfo.avatar}`:`${resourceURL}${userInfo.avatar}`" fit="cover" round />
        </div>
        <div class="right">
          <div class="name">{{userInfo?.nick_name}}</div>
          <div class="points">积分：{{userInfo?.growth_coin}}</div>
        </div>
      </div>
      <div :class="['goodsBox',list.length==1?'alone':'']">

        <div class="goods" v-for="(item,index) in list" :key="index">

          <div class="img">
            <van-image :src="`${resourceURL}${item.imageurl}`" fit="cover" />
          </div>
          <div class="content">
            <div class="name">{{item.product_name}}</div>
            <div class="bottom">
              <div class="left">
                <div class="points"><span>{{item.integral}}</span> 积分</div>

              </div>
              <div class="right">
                <van-button type="primary" round @click="chooseProduct(item)">立即兑换</van-button>
              </div>
            </div>
          </div>

        </div>

      </div>
      <!-- 选择商品规格 -->
      <van-popup class="skus" v-model="showSku" position="bottom" closeable :style="{ minHeight: '80%' }" round>
        <div>
          <div class="sku_product">
            <van-image :src="`${resourceURL}${product?.imageurl}`" fit="cover" />
            <div class="sku_info">
              <div class="sku_sale_price">{{product?.product_name}}</div>
              <div class="sku_price">
                <span class="price">{{product?.integral}}积分</span>
                <van-stepper class="stepper" v-model="stepper" input-width="50px" button-size="26px" disable-input />
              </div>
            </div>
          </div>
          <div class="sku_specifications">
            <div class="title">规格</div>
            <div class="list">
              <div class="item" v-for="(item, index) in stock" :key="index" :class="{is_active:skuActive == item.p_s_id}" @click="checkSku(item.p_s_id)">
                {{item?.p_s_name}}
              </div>
            </div>
          </div>
        </div>
        <div class="sku_btn">

          <van-button class="btn2" round type="danger" color="#B60102" text="立即购买" @click="jump" />
        </div>
      </van-popup>
    </van-list>

  </div>
</template>
<script>
export default {
  data () {
    return {
      userInfo: this.$store.state.userInfo,
      loading: false,
      finished: false,
      showSku: false,
      err: false,
      page: 1,
      list: [],
      item: "",
      stock: [],
      product: "",
      skuActive: null,
      integral: "",
      stepper: 1,
    }
  },
  methods: {
    onLoad () {
      this.page++
      this.productlist()

    },
    // 普通商品列表
    productlist () {
      this.loading = true
      this.$axios.get(this.$api.productlist, {
        params: {
          page: this.page,
          limit: '10',
          show: '4',
          is_page: '2'
        }
      }).then((res) => {
        this.loading = false
        this.searchBtn = false

        if (res.data.code == 1) {
          if (res.data.data.length == 0) {
            this.finished = true
          } else {
            this.list = this.list.concat(res.data.data);
            this.finished = false

          }
          if (this.flag) {
            this.newList = this.list.slice(0, 3)

          }
          this.flag = false

        } else {
          this.err = true;
          this.loading = false;
        }



      })
    },
    // 获取商品详情
    getProductDetail (item) {
      this.integral = item.integral
      this.$axios.get(this.$api.getproductdetail, {
        params: {
          product_id: item.product_id
        }
      }).then(res => {
        this.stock = res.data.data.stock
        this.product = res.data.data.product
      })
    },
    chooseProduct (item) {
      this.showSku = true
      this.item = item
      this.getProductDetail(item)
    },
    // 选择规格、取消选择
    checkSku (id) {
      if (this.skuActive && this.skuActive == id) {
        this.skuActive = null
      } else {
        this.skuActive = id
      }
    },
    jump () {
      this.$store.commit('setProductid', this.item.product_id)
      this.$store.commit('setintegral', this.integral)
      this.$store.commit('setstock_id', this.skuActive)
      this.$store.commit('setstepper', this.stepper)

      this.$router.push({
        name: 'ExChangeOrder'
        // query: {
        //   id: this.item.product_id,
        //   integral: this.integral,
        //   stock_id: this.skuActive,
        //   stepper: this.stepper
        // }
      })
    },

  },
  watch: {

  },
  created () {
    this.productlist()
  },
  mounted () {

  },
  computed: {

  },
}
</script>
<style scoped lang="less">
.alone {
  justify-content: flex-start !important;
}
.bg {
  background: #ff7733;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  /deep/.van-list__finished-text {
    color: #fff;
  }
}
.info {
  width: 343px;

  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  display: flex;
  padding: 16px 11px;
  margin-top: 12px;
  box-sizing: border-box;
  /deep/.van-image {
    width: 48px;
    height: 48px;
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
  }
}

.goodsBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
  .goods {
    width: 168px;
    //height: 264px;
    background: #ffffff;
    box-shadow: 0px 3px 10px 1px rgba(1, 12, 27, 0.06);
    border-radius: 6px 6px 6px 6px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    .img {
      /deep/.van-image {
        width: 168px;
        height: 168px;
      }
    }
    .content {
      width: 100%;
      height: 96px;
      padding: 6px 12px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }
    .name {
      margin-top: 6px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #201d1d;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 2; //行数
      line-clamp: 2;
      -webkit-box-orient: vertical; //盒子中内容竖直排列
    }
    .bottom {
      display: flex;
      justify-content: space-between;

      box-sizing: border-box;
      .points {
        font-size: 14px;
        white-space: nowrap;
        color: #e92525;
      }
      .count {
        font-size: 12px;
        color: rgba(32, 35, 39, 0.7);
      }
      .right {
        display: flex;
        align-items: flex-end;
        margin-left: 12px;
        button {
          width: 74px;
          height: 24px;
          background: #ff7733;
          border: 1px solid #ff7733;
          font-size: 12px;
          white-space: nowrap;
        }
      }
    }
  }
}
.skus {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px;
  box-sizing: border-box;
  .sku_product {
    display: flex;
    height: 60px;
    margin-bottom: 30px;
    .van-image {
      width: 60px;
      height: 60px;
      border-radius: 6px;
      margin-right: 10px;
      overflow: hidden;
    }
    .sku_info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .sku_sale_price {
        font-size: 18px;
        color: #fb2b2c;
        font-weight: bold;
      }
      .sku_price {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        & .price {
          color: #686868;
          font-size: 12px;
        }
        .stepper {
          /deep/.van-stepper__plus,
          /deep/.van-stepper__minus {
            background-color: #fff;
            border: 1px solid #dfdfdf;
          }
          /deep/ .van-stepper__input {
            margin: 0;
            background-color: #fff;
            border-top: 1px solid #dfdfdf;
            border-bottom: 1px solid #dfdfdf;
          }
        }
      }
    }
  }
  .sku_specifications {
    .title {
      font-size: 12px;
      margin-bottom: 10px;
    }
    .list {
      display: flex;
      flex-flow: row wrap;
      max-height: 320px;
      overflow: auto;
      .item {
        color: #000;
        font-size: 12px;
        padding: 6px 18px;
        margin: 0 16px 10px 0;
        background-color: #fff;
        border: 1px solid #b4b2b2;
        border-radius: 6px;
        transition: 0.25s;
      }
      .is_active {
        color: #fff;
        background-color: #ff7733;
        border: 1px solid #ff7733;
      }
    }
  }
  .sku_btn {
    display: flex;
    .van-button {
      flex: 1;
    }
    .btn1 {
      border-radius: 50px 0 0 50px;
      background: rgba(255, 119, 51, 0.1) !important;
      color: #ff7733 !important;
    }
    .btn2 {
      background: #ff7733 !important;
      border: 1px solid #ff7733 !important ;
    }
  }
}
</style>
